Ext.IconField = Ext.extend(Ext.BoxComponent,  {
	autoEl: 'div',
	width: 20,
	height: 20,
	selected: false,
	cls: 'icon-normal',
	icon: 'im/types/p0.png',
	value: 0,
	overCls: 'icon-over',
    clickEvent : 'click',
	handleMouseEvents : true,
	onRender : function(ct, position){
		Ext.IconField.superclass.onRender.call(this, ct, position);
		Ext.DomHelper.applyStyles(this.getEl(), {
			backgroundImage: 'url('+this.icon+')'
		});
		if(this.selected)
			this.getEl().addClass('icon-sel');
		this.getEl().ins = this;
		this.getEl().addListener('click', function(){
			if(!this.ins.selected){
				this.ins.fireEvent("selected", this.ins);
				this.ins.setSelected(true);
			}
		});
	},
	
	setSelected: function(sel){
		this.selected = sel;
		if(sel)
			this.getEl().addClass('icon-sel');
		else
			this.getEl().removeClass('icon-sel');
	},
	
    initComponent: function(){
        Ext.IconField.superclass.initComponent.call(this);
		this.addEvents(
			'selected'
		);
		
	}
});

Ext.reg('iconfield', Ext.IconField);
